<style lang="less">
  .person-info-header {
    height: 140px;
    width: 85%;
    margin: 8px auto;
  }
  .person-info-content {
    height:140px;
    margin-top: 10px;
  }
  .person-info-mt6 {
    margin-top: 6px;
  }
  .person-info-text-center {
    text-align: center;
    font-size: 14px;
  }
  .person-info-btn1 {
    background-color: #235CA7;
    border-color:#235CA7;
  }
  .person-info-btn2 {
    background-color: #598ED1;
    border-color:#598ED1;
  }
  .person-info-btn3 {
    background-color: #79A0D1;
    border-color:#79A0D1;
  }
  .pi-modal-form {
    font-size: 14px;
    line-height: 45px;
    width: 812px;
    height: 500px;
    margin:0 auto;
  }
  .pi-form-border {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
  }
  .pi-form-right {
    border-right: 1px solid #000;
  }
  .pi-form-bottom {
    border-bottom: 1px solid #000;
  }
  .pi-form-title {
    background-color: #f7f7f7;
    text-align: center;
    color: #4b8ce6;
    height: 45px;
  }
  .pi-form-content {
    height: 45px;
    padding-left: 8px;
  }
  .pi-photo {
    width: 100%;
    height: 179px;
    float: left;
  }
  .pi-form-input {
    border: none;
    color: #777;
    width: 95%;
    height: 90%;
  }
  .pi-w90 {
    width: 90px;
    float: left;
  }
  .pi-w120 {
    width: 120px;
    float: left;
  }
  .pi-w140 {
    width: 140px;
    float: left;
  }
  .pi-w160 {
    width: 160px;
    float: left;
  }
  .pi-w180 {
    width: 180px;
    float: left;
  }
  .pi-w390 {
    width: 390px;
    float: left;
  }
  .pi-w580 {
    width: 580px;
    float: left;
  }
  .pi-w670 {
    width: 670px;
    float: left;
  }
  .pi-remark {
    padding-left: 80px;
    font-size: 14px;
  }
  .pi-remark-content {
    width: 812px;
    overflow: auto;
    word-break: break-all;
    border: 1px solid #727171;
    padding: 10px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
</style>
<template>
  <div>
    <Row>
      <Col span="3">
        <img :src="showphoto" class="hd-img-responsive person-info-header"/>
      </Col>
      <Col span="6" class="person-info-content">
        <p><span>姓 名:</span> {{userInfo.name}}</p>
        <p class="person-info-mt6"><span>性 别:</span> {{userInfo.sex}}</p>
        <p class="person-info-mt6"><span>出 生:</span> {{userInfo.birthday}}</p>
        <p class="person-info-mt6"><span>民 族:</span> {{userInfo.folk}}</p>
        <p class="person-info-mt6"><span>职 业:</span> {{userInfo.occupation}}</p>
      </Col>
      <Col span="6" class="person-info-content">
        <p><span>婚姻状况:</span> {{userInfo.marriage}}</p>
        <p class="person-info-mt6"><span>文化程度:</span> {{userInfo.education}}</p>
        <p class="person-info-mt6"><span>政治面貌:</span> {{userInfo.political_outlook}}</p>
        <p class="person-info-mt6"><span>兵役情况:</span> {{userInfo.military}}</p>
        <p class="person-info-mt6"><span>联系方式:</span> {{userInfo.mobile}}</p>
      </Col>
      <Col span="7" class="person-info-content">
        <p><span>共同居住人员:</span> {{userInfo.co_resident}}</p>
        <p class="person-info-mt6"><span>银行卡收入情况:</span> {{userInfo.personal_income}}</p>
        <p class="person-info-mt6"><span>居住情况:</span> {{userInfo.living_condition}}</p>
      </Col>
      <Col span="2" class="person-info-text-center">
        <Button type="primary" class="person-info-mt6 person-info-btn1" @click="withCard1">输入卡号</Button><br>
        <Button type="primary" class="person-info-mt6 person-info-btn2" @click="withCard2">持证办理</Button><br>
        <Button type="primary" class="person-info-mt6 person-info-btn3" @click="withoutCard">无证办理</Button><br>
        <Button type="primary" :disabled="controlData.readType=='0'" class="person-info-mt6"
        @click="fillUserInfo" style="background-color: #0F376B;border-color:#0F376B;">完善信息</Button>
      </Col>
    </Row>
    <Modal v-model="controlData.show1" title="输入证件号码" width="500">
      <Row class="mb20">
        <Col span="6" style="text-align: right; margin-right: 10px; margin-top: 6px;">证件类型:</Col>
        <Col span="14">
          <Select v-model="controlData.card_type" placeholder="请选择证件类型" filterable>
            <Option v-for="obj in dicList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
          </Select>
        </Col>
      </Row>
      <Row>
        <Col span="6" style="text-align: right; margin-right: 10px; margin-top: 6px;">证件号码:</Col>
        <Col span="14">
          <Input v-model="controlData.cardnoInput" placeholder=""></Input>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="text" size="large" @click="controlData.show1=false">取消</Button>
        <Button type="primary" size="large" @click="withCardOK">确定</Button>
      </div>
    </Modal>
    <Modal v-model="mshow" title="高拍仪" @on-visible-change="modalChange">
      <Row>
        <Col span="16" offset="8">
          <i-circle :percent="percent" :stroke-color="color" v-if="faceSuccess">
            <Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
            <span v-else style="font-size:24px">{{ percent }}%</span>
          </i-circle>
        </Col>
        <i-col span="24">
          <Alert type="error" v-if="errMsg.show">{{errMsg.msg}}</Alert>
        </i-col>
      </Row>
      <wl-equipment :file-path="filePath" :file-name="fileName" v-model="deviceUserInfo" @change1="change"
        :type="device_type" :is-open="openNow" ref="wlEquipment" @img-result="imgResult"></wl-equipment>
      <Row>
        <i-col span="8">
          <img :src="rest_idcard_header" id="db"/>
        </i-col >
      </Row>
      <Row>
        <Col span="10">
          <Input v-model="user_idcard" placeholder="输入身份证号" style="width: 200px" />
        </Col >
        <i-col span="4" offset="8">
          <Button type="primary" :loading="loadingPhoto" @click="savePhoto">
            <span v-if="!loadingPhoto">比对身份信息</span>
            <span v-else>正在保存...</span>
          </Button>
        </i-col>
      </Row>
    </Modal>
    <Modal v-model="faceStatus" title="人脸识别" width="700" @on-ok="faceStatus=false" @on-cancel="faceStatus=false">
      <face-comparison :isPlay="faceStatus" @img-result="imgResult" :file-path="filePath" :file-name="fileName"></face-comparison>
    </Modal>
    <person-info-modal :user-info="userInfo" :control-data="controlData" :severUserInfo="severUserInfo" @result="addResult"></person-info-modal>
  </div>
</template>

<script>
import nophoto from '@/assets/images/nophoto.jpeg'
import { userinfo, getUserPhoto, getgrouplist } from '@/api/mainv3'
import { imgComparison, getDictList } from '@/api/common'
import { idcard2 } from '@/api/idcard'
import WlEquipment from '@/components/wl-equipment/index'
import FaceComparison from '_c/face-comparison'
import PersonInfoModal from './personInfoModal'

export default {
  name: 'PersonInfo',
  props: {
    // mainv3传入，记录全局人员基本信息，读取身份证优先存入
    userOverall: Object
  },
  components: {
    PersonInfoModal,
    FaceComparison,
    WlEquipment
  },
  data () {
    return {
      nophoto,
      showphoto: '',
      severUserInfo: {},
      percent: 0,
      imgUrl: '',
      rest_idcard_header: '',
      user_idcard: '',
      device_type: '',
      filePath: '',
      fileName: 'photo.png',
      is_photo: false,
      faceStatus: false,
      faceSuccess: false,
      mshow: false,
      openNow: false,
      loadingPhoto: false,
      errMsg: {
        show: false,
        msg: ''
      },
      userInfo: { photo: nophoto },
      deviceUserInfo: {},
      controlData: {
        show1: false,
        uploadHeader: false,
        readType: 0, // 读取当前人员信息的方式 0未读取 1输入卡号 2读身份证 3人脸对比
        cardnoInput: '',
        showDetail: false,
        photo: '',
        personTags: [],
        idsArr: []
      },
      dicList: [],
      errorTitle: '错误'
    }
  },
  computed: {
    color () {
      let color = '#2db7f5'
      if (this.percent === 100) {
        color = '#5cb85c'
      }
      return color
    }
  },
  methods: {
    withCard1 () {
      this.controlData.show1 = true
      this.controlData.cardnoInput = ''
      this.controlData.card_type = '1'
    },
    // 输入卡号获取人员信息
    withCardOK () {
      if (!this.controlData.card_type) {
        const content = '<p>请选择证件类型</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (!this.controlData.cardnoInput) {
        const content = '<p>请填写证件号码</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.controlData.card_type === '1') {
        if (this.testid(this.controlData.cardnoInput)) {
          this.controlData.show1 = false
          this.controlData.readType = 1
          this.getUserInfo(this.controlData.cardnoInput, this.controlData.card_type)
        }
      } else {
        this.controlData.show1 = false
        this.controlData.readType = 1
        this.getUserInfo(this.controlData.cardnoInput, this.controlData.card_type)
      }
    },
    // 刷身份证办理
    withCard2 () {
      this.controlData.readType = 2
      this.controlData.uploadHeader = true
      let that = this
      if (this.severUserInfo.email === 'JieYuDevice') {
        that.readIDCard(function (idcardinfo) {
          that.controlData.photo = 'data:image/png;base64,' + idcardinfo.PhotoBmp
          that.userOverall.name = idcardinfo.Name
          that.userOverall.address = idcardinfo.Address
          that.userOverall.sex = idcardinfo.Sex
          that.userOverall.folk = idcardinfo.Nation
          that.userOverall.card_type = '1'
          that.getUserInfo(idcardinfo.IDCode, '1')
        })
      } else {
        that.device_type = 'idcard'
        console.log(that.device_type, '类型哈哈哈哈')
        // that.$refs.wlEquipment.getResult()
        setTimeout(function () {
          console.log(that.deviceUserInfo.idcard, 'that.deviceUserInfo')
          that.controlData.photo = 'data:image/png;base64,' + that.deviceUserInfo.HeadPic
          that.userOverall.name = that.deviceUserInfo.name
          that.userOverall.address = that.deviceUserInfo.address
          that.userOverall.sex = that.deviceUserInfo.sex
          that.userOverall.folk = that.deviceUserInfo.folk
          that.userOverall.card_type = '1'
          that.getUserInfo(that.deviceUserInfo.idcard, '1')
        }, 3000)
        // that.device_type = ''
        setTimeout(function () {
          that.device_type = ''
        }, 3000)
      }
    },
    // 刷脸办理
    withoutCard () {
      this.controlData.readType = 3
      if (this.severUserInfo.email === 'JieYuDevice') {
        this.faceStatus = true
      } else {
        this.device_type = 'faceCamera'
        this.mshow = true
        this.openNow = true
      }
    },
    modalChange (e) {
      this.openNow = e
    },
    change (data, base64) {
      this.imgUrl = data.base64
      this.is_photo = true
    },
    // 完善用户信息
    fillUserInfo () {
      if (!this.userOverall.id) return
      this.controlData.showDetail = true
    },
    // 每次保存人员信息后重新查询
    addResult (cardno) {
      this.getUserInfo(cardno)
    },
    // 刷读身份证后查询个人信息
    getUserInfo (cardno, card_type) {
      this.controlData.cardno = cardno
      this.userOverall.cardno = cardno
      this.userOverall.card_type = card_type
      userinfo(cardno).then(res => {
        if (res.data.errcode === 0) {
          this.userInfo = res.data.data
          if (this.userInfo.focus_group) {
            this.controlData.personTags = this.userInfo.focus_group.split(',')
          } else {
            this.controlData.personTags = []
          }
          if (this.userInfo.ids) {
            this.controlData.idsArr = this.userInfo.ids.split(',')
          } else {
            this.controlData.idsArr = []
          }
          // 不论是否上传头像，查询个人信息时包含头像则不上传
          if (this.userInfo.photo) {
            console.log(this.userInfo.photo, 'touxiang')
            this.controlData.photo = this.userInfo.photo
            this.controlData.uploadHeader = false
          } else {
            console.log('无头像', this.controlData.photo)
            this.controlData.photo = this.nophoto || ''
          }
          if (this.controlData.readType !== 2) {
            this.userOverall.name = this.userInfo.name
            this.userOverall.address = this.userInfo.address
            this.userOverall.sex = this.userInfo.sex
            this.userOverall.folk = this.userInfo.folk
          }
          this.userOverall.readCount++
          this.userOverall.id = this.userInfo.id
          this.userOverall.userInfo = this.userInfo
          this.showphoto = this.controlData.photo
          this.userInfo.card_type = card_type
        } else {
          this.$Notice.error({ title: '新用户', desc: '请先完善用户的基础信息' })
          this.userInfo = { cardno: cardno }
          this.userInfo.card_type = card_type
          if (this.controlData.readType === 2) {
            this.userInfo.name = this.userOverall.name
            this.userInfo.domicile_address = this.userOverall.address
            this.userInfo.sex = this.userOverall.sex
            this.userInfo.folk = this.userOverall.folk
            this.controlData.uploadHeader = true
          } else {
            this.controlData.uploadHeader = false
            this.controlData.photo = this.nophoto
          }
          this.controlData.personTags = []
          this.controlData.idsArr = []
          this.controlData.showDetail = true
        }
      })
    },
    savePhoto () {
      if (this.is_photo) {
        this.loadingPhoto = true
        this.comparison(this.user_idcard, this.imgUrl)
      } else {
        this.ShowInfo('请先拍照！！！')
      }
    },
    // 读取身份证信息
    readIDCard (callback) {
      let that = this
      idcard2().then(data => {
        let result = data.data
        if (result.code === 'SUCCESS') {
          callback(result.result)
        } else {
          that.$Message.warning(result.message)
        }
      }).catch(err => {
        that.$Message.warning('没有找到读卡设备')
        console.log(err, '错误信息')
      })
    },
    imgResult (idcard) {
      this.getUserInfo(idcard)
      this.faceStatus = false
    },
    // 正则验证身份证
    isCardNo (card) {
      let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      let reg1 = /^([a-zA-z]|[0-9]){5,17}$/
      if (reg.test(card) === false && reg1.test(card) === false) {
        this.$Modal.error({
          title: '错误提醒',
          content: '<p>证件号码输入不合法</p>',
          onOk: () => {
            console.log('关闭失败框')
          }
        })
        return false
      } else {
        return true
      }
    },
    testid (id) {
      // 1 "验证通过!", 0 //校验不通过 // id为身份证号码
      var format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/
      // 号码规则校验
      if (!format.test(id)) {
        this.$Modal.error({
          title: '错误提醒',
          content: '<p>身份证号码不合规</p>',
          onOk: () => {
            console.log('关闭失败框')
          }
        })
        return false
        // return { 'status': 0, 'msg': '身份证号码不合规' }
      }
      // 区位码校验
      // 出生年月日校验  前正则限制起始年份为1900;
      var year = id.substr(6, 4) // 身份证年
      var month = id.substr(10, 2) // 身份证月
      var date = id.substr(12, 2) // 身份证日
      var time = Date.parse(month + '-' + date + '-' + year) // 身份证日期时间戳date
      var now_time = Date.parse(new Date()) // 当前时间戳
      var dates = (new Date(year, month, 0)).getDate() // 身份证当月天数
      if (time > now_time || date > dates) {
        this.$Modal.error({
          title: '错误提醒',
          content: '<p>出生日期不合规</p>',
          onOk: () => {
            console.log('关闭失败框')
          }
        })
        return false
        // return { 'status': 0, 'msg': '出生日期不合规' }
      }
      // 校验码判断
      var c = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] // 系数
      var b = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'] // 校验码对照表
      var id_array = id.split('')
      var sum = 0
      for (var k = 0; k < 17; k++) {
        sum += parseInt(id_array[k]) * parseInt(c[k])
      }
      if (id_array[17].toUpperCase() !== b[sum % 11].toUpperCase()) {
        this.$Modal.error({
          title: '错误提醒',
          content: '<p>身份证校验码不合规</p>',
          onOk: () => {
            console.log('关闭失败框')
          }
        })
        return false
        // return { 'status': 0, 'msg': '身份证校验码不合规' }
      }
      return true
      // return { 'status': 1, 'msg': '校验通过' }
    },
    ShowInfo (op) {
      this.errMsg = { show: true, msg: op }
      let that = this
      setTimeout(function () {
        that.errMsg = { show: false, msg: '' }
      }, 2000)
    },
    comparison (idcard, photo) {
      let img2 = photo
      let that = this
      if (idcard === '') {
        this.ShowInfo('身份证不能空')
        return false
      }
      getUserPhoto(idcard).then(rest => {
        let data = rest.data.data
        if (rest.data.errcode !== 0 || !data.photo) {
          console.log('@@@@@123456')
          that.ShowInfo('没有用户信息(照片信息！)，请先首次绑定用户信息')
          return false
        }
        that.rest_idcard_header = data.photo
        var div = document.getElementById('db')
        div.setAttribute('class', 'db-img')
        imgComparison(data.photo, img2).then(res => {
          that.loadingPhoto = false
          console.log(res.data, '比对照片数据')
          if (JSON.parse(res.data.value).confidence > 40) {
            that.faceSuccess = true
            let num = 0
            let one = true
            setInterval(function () {
              num += 10
              if (num <= 100) {
                that.percent = num
              }
              if (num > 120 && one) {
                one = false
                that.imgResult(that.user_idcard)
              }
            }, 200)
          } else {
            that.ShowInfo('匹配度' + res.data.confidence + '%,不符合判定要求')
          }
        })
      })
    },
    // 获取小区数据
    findGetsmallareaList () {
      getgrouplist({}).then(ret => {
        if (ret.data.errcode === 0) {
          this.controlData.smallarealist = ret.data.data
        } else {
          this.$Notice.error({ title: '获取小区列表失败', desc: '' })
        }
      })
    },
    // 获取字典数据
    getDicInfo () {
      getDictList({ 'type': 'csc_squser_cardtype' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data.results
          console.log(this.dicList, '字典')
        } else {
          this.$Notice.error({ title: '获取字典列表失败', desc: '' })
        }
      })
    }
  },
  mounted () {
    this.showphoto = this.nophoto
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.filePath = 'userphoto/' + this.severUserInfo.company_code + '/' + this.severUserInfo.loginName
    this.findGetsmallareaList()
    this.getDicInfo()
  }
}
</script>
